<style >
/*@import '../assets/main.css'*/
.transaction.login_content{  
/*    min-width: 1280px;
    min-height: 650px;
    height: 100vh;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    color: #9ba2a8;*/
    background: #4e4f59;
  }
  
.kline_record,.kline_buysell,.kline_record  .el-table th,.kline_record   .el-table tr{background:#282a36;}
#kline_container{
	/*    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    top: 0;*/
}
.kline_record .el-tabs__item{
	height:24px;
	line-height: 24px;
	color:#9ba2a8;
}
.kline_record .el-tabs__item.is-active {
    color: #409EFF;
}
.kline_record .el-tabs__nav-wrap:after{
	background-color: #454a54;
}
.kline_record .el-table{
	background: #282a36;
	/*color: #f9f9fa;*/
}
.kline_record .el-table thead{
	color:#fff;

}

.kline_record  .el-table th,.kline_record   .el-table tr{border-color:#454a54;}
.kline_record .el-table td,.kline_record  .el-table th{padding:0;}
.kline_record .el-table .cell{line-height: 25px;}
.kline_record .el-table::before{background-color:#282a36;}
.kline_record .el-pagination .btn-next,.kline_record .el-pagination .btn-prev,.kline_record  .el-pager li,.kline_record  .el-pagination__jump .el-input__inner{background-color:#282a36;}
.kline_record  .el-pagination__jump .el-input__inner{color:#fff;border-color:#9ba2a8;}
.kline_content{
	display: flex;
	margin-top:4px;
}
.kline_record{flex:1;    margin-right: 2px;}
.kline_buysell{display: flex;padding:5px;margin-left:2px;}
.kline_buysell .usercenter_cc{width: 50%;padding:5px;}
.kline_buysell .usercenter_cc:first-child{
	padding-left:10px;
}
.kline_buysell .usercenter_cc:nth-child(2) {padding-right:10px;}
.kline_buysell .list_header{padding:0;font-size: 12px;margin-bottom:5px;background: #282a36;color:rgb(175, 180, 184);border-bottom: 1px solid #454a54;}
.kline_buysell .el-form-item{
		 border:1px solid #444;
		 display: flex;
		 padding:0 5px;
		 margin-bottom: 10px;
}
.kline_buysell .el-form-item__content{line-height: 30px;}
.kline_buysell .el-form-item__label{font-size: 12px;line-height: 30px;color: #a0aaaa;min-width: 50px;}
.kline_buysell .el-input__inner{
	    color: #a0aaaa;
        background-color: #282a36;
       border:none;
       text-align: right;
       height:30px;
       line-height: 30px;
       font-size: 12px;
}
.kline_buysell .kline_alt,.kline_buysell .list_text,.kline_buysell .list_rate{
	    color: #a0aaaa;
		font-size: 12px;
		margin-bottom: 5px;
}
.kline_buysell .list_rate{text-align: right;color:#333;}
.kline_buysell .list_rate span{
	background-color: #666;
	    display: inline-block;
    padding: 2px 5px 1px;
    border-radius: 10px;
}
.kline_buysell .list_text{
	display: flex;
	justify-content: space-between;
}
.kline_buysell .kline_alt span{
	color:#de5959;
}
.kline_buysell .kline_alt_right span{
	color:#21b68a;
}

.kline_buysell .span_btn_all{    width: 450px;
    height: 30px;
    font-size:14px;
    color: #fff;
    font-size: 14px;
    background: #21b68a;
    padding:5px;
    border-radius: 3px;}
.kline_buysell .span_btn_red{background: #de5959;border:none;}
.kline_buysell .span_btn_all:hover,.kline_buysell .span_btn_all:focus{opacity: 0.9; background: #21b68a;}
.kline_buysell .span_btn_red:hover,.kline_buysell .span_btn_red:focus{opacity: 0.9; background: #de5959;}
.list_slider .el-slider__button-wrapper{
    width: 24px;
    height: 24px;
    top: -11px;
}
.list_slider .el-slider__button{
	    background-color: #de5959;
        width: 14px;
	    height: 14px;
	    border: 0;
}
.kline_buysell .list_slider{padding:10px;width:80%;margin:0 auto;}
.list_slider .el-slider__bar{height:2px;background: #de5959;}
.list_slider_right .el-slider__button{
	background-color: #21b68a;
}
.list_slider_right .el-slider__bar{height:2px;background: #21b68a;}

.list_slider .el-slider__runway{
	height: 2px;
    background: #444;
    margin: 0;
}
.trade_container{position: relative;width:502px;}
/*.transaction .chart_container{width:auto;}*/
.transaction_kline{
	display: flex;
    justify-content: flex-end;
}
.kline_iframe{flex:1;position: relative;}
.kline_iframe iframe{width: 100%;height:100%;position: relative;top:29px;}
.trade_container.dark{border-left:4px solid #4e4f59;}
.kline{overflow-x: hidden;}
.kline_right{
	width:516px;
	display: flex;
    color: #9ba2a8;
    background: #282a36;
    border-left: 4px solid #4e4f59;
}
.kline_title{
	display: flex;
	justify-content: space-around;
	height: 30px;
    background: #21232e;
    font-size: 12px;
    line-height: 30px;
    padding: 0 20px;
    color: #9ba2a8;
}
.kline_right_item{   /* text-align: center; */   flex: 1;}
.kline_right_list ul{list-style: none;padding:0;margin:0;}
.kline_right_list ul li{
	color: #444;
	cursor: pointer;
    line-height: 18px;
    font-size: 12px;
    background-image: url('../assets/img/bg.jpg');    
    display: flex;
    justify-content: space-around;
        padding: 0 20px;
 
}
.depth-data-item ul li{
    background-repeat: repeat-y;
    background-position: 22px center;
}
.depth-data-item .above li{
	  background-color: #572319;

}
.depth-data-item .below li{
 	background-color: #1d4033;
	
}
.depth-data-item .below li span:first-child {
    color: #fc5953;
}
.depth-data-item .above li span:first-child {
    color: #21b68a;padding-right: 10px;
}
.kline_right_list ul li span{
    /*padding-right: 10px;*/
}
.kline_right_item.deal{
	border-left:1px solid #4e4f59;
}
.kline_right_list ul li span i {
    color: #999;
    font-style: normal;
    padding: 0;
    margin: 0;
}
.kline_right_list .middle{
	font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    color: #ccc;
    display: flex;
    justify-content: center;
}
.kline_right_list .middle span{
	padding:0 5px;
}
.kline_right_list .middle span:first-child {
    color: #fc5953;
}
.kline_right_list .middle span:nth-child(2) {
    color: #fa0;
}
.deal .kline_right_list li.b span:nth-child(2) i {
    color: #fc5953;
}
.deal .kline_right_list li.s span:nth-child(2) i {
    color: #21b68a;
}
.transaction_kline{height:650px;}
.transaction .el-dialog__wrapper{
	display: flex;
	align-items: center;
}
.transaction .el-dialog{width:434px;}
.transaction .dialog_alt{
    margin-left: 130px;
    font-size: 12px;
    color: #f56c6c;
}
.transaction .el-table td, .transaction .el-table th.is-leaf{border-bottom-color: #454a54;}
.transaction .el-table{text-align: center;}
.transaction .span_btn{
	    color: #446E9B;
    cursor: pointer;
}
.transaction .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #282a36;
    opacity: 0.8;
}
.transaction .kline_title_coin{text-align: left;justify-content: flex-start;padding:0;}
.kline_iframe_title{
    height: 30px;
    background: rgb(33, 35, 46);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    /*padding:0 10px;*/
}
.g-list-rich{
	list-style: none;
	display: flex;
	margin:0;
	padding:0;
}
.g-list-rich li{
    display: inline-block;
    line-height: 30px;
    padding: 0 6px;
    font-size: 12px;
}
.g-list-rich li a{
	color: #afb4b8;
}
.kline_menu.el-dropdown-menu,.kline_iframe_tabs_content .el-tabs--top{
	background: rgb(33, 35, 46);
	border-color:#333;
	width: 500px;
	/*margin-top:10px;*/
}

.kline_menu .el-dropdown-menu__item:focus,.kline_menu  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: rgb(33, 35, 46);
    color: #afb4b8;
}
.kline_menu .el-tabs__nav-wrap::after{
    background-color: #454a54;
}
.kline_menu .el-table,.kline_menu .el-table th,.kline_menu  .el-table tr{
	background-color: rgb(33, 35, 46);
	color:#fff;
	text-align: center;
}
.kline_menu .el-table td,.kline_menu .el-table th.is-leaf{border:none;}
.kline_menu .el-table td,.kline_menu .el-table th{padding:0;font-size:12px;}
.kline_menu .el-table::before{background-color:rgb(33, 35, 46); }
.kline_menu .el-table tr:hover {
    background: #21222b;
    cursor: pointer;
}
.transaction .el-table--enable-row-hover .el-table__body tr:hover>td{
	background-color:#21222b;
}
.kline_title_coin .el-dropdown{color:#00a9fe;    margin-right: 10px;border:1px solid #454a54;padding:0 15px 0 10px;z-index: 1;background-color:rgb(33, 35, 46);/*border-bottom: none;*/}
.kline_title_coin .el-dropdown-border{border-bottom: none;}
.kline_title_coin .el-dropdown:hover + .kline_iframe_tabs_content,.kline_iframe_tabs_content:hover{
	display: block;
}
.kline_iframe_tabs_content{position: absolute;left:0px;top:29px;border: 1px solid #454a54;display: none;}

.kline_menu  .el-dropdown-menu__item{padding:0;}
.kline_menu  .el-tabs__header{padding:0 5px;}
.el-popper[x-placement^=bottom] .popper__arrow::after,.el-popper[x-placement^=bottom] .popper__arrow{border-bottom-color: rgb(33,35,46);}

  /*滚动条样式*/
.kline_menu .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.kline_menu .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(69,74,84,0.8);
}
.kline_menu .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.8);
}
.kline_menu .el-tabs__item{
	/*height:24px;*/
	/*line-height: 24px;*/
	color:#9ba2a8;
}
.kline_menu .el-tabs__item.is-active,.kline_menu .el-tabs__item:hover {
    color: #00a9fe;
}
.icon_dropdown{

    position: absolute;
    right: 0;
    top: 8px;
}
.span_price{
	    color: #6f6f6f;
}

</style>
<template>
  <div class="transaction">
    <div class="login_main transaction">
      <div class="header_index">
        <myHeader></myHeader>

      </div>
      <div class="login_content transaction">     
      	<div class="transaction_kline">
  			<div class="kline_iframe">
  				<div class="kline_iframe_title kline_menu">
  					<div class="kline_iframe_tabs">
  						<div class="kline_title kline_title_coin">
  							<div :class="'el-dropdown '+dropdownClass" @mouseover="changeIcon" ><span class="el-dropdown-link el-dropdown-selfdefine      " aria-haspopup="list" aria-controls="dropdown-menu-4746" role="button" tabindex="0">
							    {{marketName}}<i  :class="'el-icon-arrow-down icon_dropdown '+iconName" ></i></span> 
							</div>
							<div class="kline_iframe_tabs_content" @mouseover="changeIcon"  @mouseout="changeIconOut">
								<el-tabs v-model="activeNameMarket"  @tab-click="handleClick">
								    <el-tab-pane v-for="(item,index) in tradingarea" :labelkey="item.value" :label="item.code" :name="'area'+index">
								    	<el-table @row-click="rowClick"  :data="marketListArea"  max-height="200"   style="width: 100%" :ref="item.code">
										    <el-table-column   prop="name"  label="市场" width="100" >
										    </el-table-column>
										    <el-table-column   prop="openPrice" label="价格">
										    	<template slot-scope="scope">
										    		<span class="span_price">￥ {{scope.row.openPrice}}</span>
										    	</template>
										    </el-table-column>
										    <el-table-column   prop="dealnum" label="24h涨跌">
										    </el-table-column>
									        <el-table-column   prop="pricetotal" label="24h成交量" width="120">
									        	<template slot-scope="scope">
									            	<span>￥{{scope.row.pricetotal}}	</span>				       
									        	</template>
										    </el-table-column>
									        <el-table-column   prop="dealnum" label="24h涨跌">
									        	<template slot-scope="scope">
									            	<span :class="scope.row.dealnum>0?'isRed':'isGreen'">{{scope.row.dealnum}}%	</span>				       
									        	</template>
										    </el-table-column>
										  
									    </el-table>
								    </el-tab-pane>
									  
								</el-tabs>
							</div>


  							<!-- <span>htc/btc</span> -->
  							<!-- <el-dropdown   @visible-change="changeEvent">
							  <span class="el-dropdown-link">
							    htc/btc<i :class="'el-icon-arrow-down '+iconName"></i>
							  </span>
							  <el-dropdown-menu slot="dropdown" class="kline_menu">
							    <el-dropdown-item>
							    	<div class="kline_iframe_tabs_content">
  										<el-tabs v-model="activeNameMarket"  @tab-click="handleClick">
										    <el-tab-pane v-for="(item,index) in tradingarea" :labelkey="item.value" :label="item.code" :name="'area'+index">
										    	<el-table  :data="marketListArea"  max-height="200"   style="width: 100%" :ref="item.code">
												    <el-table-column   prop="currname"  label="市场" >
												    </el-table-column>
												    <el-table-column   prop="price" label="价格" sortable>
												    </el-table-column>
												    <el-table-column   prop="dealnum" label="24h涨跌">
												    </el-table-column>
											        <el-table-column   prop="pricetotal" label="24h成交量" width="120">
											        	<template slot-scope="scope">
											            	<span>￥{{scope.row.pricetotal}}	</span>				       
											        	</template>
												    </el-table-column>
											        <el-table-column   prop="dealnum" label="24h涨跌">
											        	<template slot-scope="scope">
											            	<span :class="scope.row.dealnum>0?'isRed':'isGreen'">{{scope.row.dealnum}}%	</span>				       
											        	</template>
												    </el-table-column>
												  
											    </el-table>
										    </el-tab-pane>
											  
										</el-tabs>
  									</div>
							    </el-dropdown-item>
							  
							  </el-dropdown-menu>
							</el-dropdown> -->
  							<div>
  								<ul class="g-list-rich">
  									<li><a data-val="1w" data-lang="toper-cycle-1w" style="color: rgb(33, 182, 138);">57742.658</a></li> 
  									<li><a data-val="1h" data-lang="toper-cycle-1h" style="color: rgb(33, 182, 138);">-2.61%</a></li><li><a data-val="30m" data-lang="toper-cycle-30m">最低价：57762.361</a></li> 
  									<li><a data-val="15m" data-lang="toper-cycle-15m">最高价：58896</a></li> 
  									<li><a data-val="5m" data-lang="toper-cycle-5m">24小时成交量：20.71426</a></li>
  								</ul>
  							</div>
  						</div>
  						
  					</div>
  					
  				</div>
      			<iframe src="./static/requirejs.html"  frameborder="0" scrolling="auto"style=""></iframe>

      		</div>
      		<div class="kline_right">
				<div class="kline_right_item">
					<div class="kline_title">
						<span>档位</span>
						<span>价格</span>
						<span>委托量</span>
					</div>
					<div class="kline_right_list depth-data-item">
						<ul class="above">
							<li v-for="item in buyList">
								<span>卖出(15)</span>
								<span><i class="test">{{item.price}}</i>{{item.zeroNum}}</span>
								<span><i class="test">197.59</i>000</span>
							</li>
						</ul>
						<div class="middle"><span>$0.7734</span><span>￥4.8700</span></div>
						<ul class="below">
							<li v-for="item in 5">
								<span>买入(15)</span>
								<span><i class="test">197.59</i>000</span>
								<span><i class="test">197.59</i>000</span>
							</li>
						</ul>
					</div>
				</div>		
				<div class="kline_right_item deal">
					<div class="kline_title">
						<span>时间</span>
						<span>价格</span>
						<span>成交量</span>
					</div>
					<div class="kline_right_list">
						<ul>
							<li class="b" v-for="item in 5">
								<span><i>154.01</i>000</span>
								<span><i class="test">197.59</i>000</span>
								<span><i class="test">197.59</i>000</span>
							</li>
						</ul>
					</div>
				</div>			
			</div>
      	</div>
      	<!-- <div class="transaction_kline">
      	
  			<div class="kline">
			    <div id="kline_container"></div>
			</div>
			<div class="kline_right">
				<div class="kline_right_item">
					<div class="kline_title">
						<span>档位</span>
						<span>价格</span>
						<span>委托量</span>
					</div>
					<div class="kline_right_list depth-data-item">
						<ul class="above">
							<li v-for="item in 5">
								<span>卖出(15)</span>
								<span><i class="test">197.59</i>000</span>
								<span><i class="test">197.59</i>000</span>
							</li>
						</ul>
						<div class="middle"><span>$0.7734</span><span>￥4.8700</span></div>
						<ul class="below">
							<li v-for="item in 5">
								<span>卖入(15)</span>
								<span><i class="test">197.59</i>000</span>
								<span><i class="test">197.59</i>000</span>
							</li>
						</ul>
					</div>
				</div>		
				<div class="kline_right_item deal">
					<div class="kline_title">
						<span>时间</span>
						<span>价格</span>
						<span>成交量</span>
					</div>
					<div class="kline_right_list">
						<ul>
							<li class="b" v-for="item in 5">
								<span><i>154.01</i>000</span>
								<span><i class="test">197.59</i>000</span>
								<span><i class="test">197.59</i>000</span>
							</li>
						</ul>
					</div>
				</div>			
			</div>
      	</div> -->
     
		<div class="kline_content">
			<div class="kline_record">
				<el-tabs v-model="activeName" >
					    <el-tab-pane  label="未完成委托" name="first">
					    	<el-table  :data="entrustlistData"   style="width: 100%" :ref="entrustlistData" >
							    <el-table-column   prop="createTime"  label="委托时间" >
							    </el-table-column>
							    <el-table-column   prop="type" label="类型" :formatter="formatSex">
							    </el-table-column>
							    <el-table-column   prop="price" label="委托价格">
							    </el-table-column>
						        <el-table-column   prop="number" label="委托数量">
						        	
							    </el-table-column>
						        <el-table-column   prop="amount" label="委托总额">
						        	
							    </el-table-column>
							  	 <el-table-column   prop="status" label="状态" :formatter="formatStatus">
						        	
							    </el-table-column>
							  
							    <el-table-column label="操作">
						            <template slot-scope="scope">					       
						              <span class="span_btn"  @click="handleDeal(scope.$index, scope.row)" >撤单</span>				           
						             
						            </template>
					            </el-table-column>
						    </el-table>
						    <!--工具条-->
						    <el-col :span="24" class="toolbar toolbar_footer">			     
						      <el-pagination  layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
						      </el-pagination>
						    </el-col>
					    </el-tab-pane>
						<el-tab-pane  label="成交记录" name="second">
				    		<el-table  :data="deallistData"   style="width: 100%" :ref="deallistData" >
							    <el-table-column   prop="modifiedTime"  label="成交时间" >
							    </el-table-column>
							    <el-table-column   prop="type" label="类型" :formatter="formatSex">
							    </el-table-column>
							    <el-table-column   prop="dealPrice" label="成交价格">
							    </el-table-column>
						        <el-table-column   prop="dealNumber" label="成交数量">
						        	
							    </el-table-column>
						        <el-table-column   prop="dealAmount" label="成交总额">
						        	
							    </el-table-column>
							
							  
						    </el-table>
						    <!--工具条-->
						    <el-col :span="24" class="toolbar toolbar_footer">			     
						      <el-pagination  layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange1" :page-size="showCount" :total="total1" style="float:right;">
						      </el-pagination>
						    </el-col>
					    </el-tab-pane>
						  
					</el-tabs>
			</div>
			<div class="kline_buysell">
				<div class="usercenter_cc">
      				<div class="list_header">买入{{mySellCoinName}}</div>
      				<div class="list_content">
      					<div class="kline_alt">我的余额:<span> {{balance}}</span> {{myBuyCoinName}}</div>
      					<div class="kline_alt">可买入量:<span> 0</span> {{mySellCoinName}}</div>
  						<el-form  class="list_form"  :model="buyForm">
				            <el-form-item label="买入价" >
				               <el-input v-model="buyForm.buyprice" @blur="caculate(1)" >
							  </el-input>
				            </el-form-item>
				          	 <el-form-item label="买入量" class="list_buynum">
				               <el-input v-model="buyForm.buynum"  placeholder="请输入买入量" @blur="caculate(1)" >
							  </el-input>
				            </el-form-item>
				            <div class="list_text">
				            	<span>预计交易额</span>
				            	<span>{{totalamount}} BTCX</span>
				            </div>
				            <div class="list_slider">
				            	<el-slider v-model="buyForm.slidernum"></el-slider>
				            </div>
				            <div class="list_rate">
				            	<span>费率{{feeBuy}}</span>
				            	<span>手续费{{serviceCharge}}</span>
				            </div>
				            <!-- <el-form-item> -->
				            	<el-button style="width:100%;" class="span_btn_all span_btn_red	" type="success" :loading="isBtnLoading"  @click="handlebuy()" >立即买入</el-button>
				            <!-- </el-form-item> -->

			          	</el-form>
      				</div>
      			</div>
      			<div class="usercenter_cc">
      				<div class="list_header">卖出{{mySellCoinName}}</div>
      				<div class="list_content">
      					<div class="kline_alt kline_alt_right">我的余额:<span> {{balanceSell}}</span> {{mySellCoinName}}</div>
      					<div class="kline_alt kline_alt_right">可兑换量:<span> 0</span> {{myBuyCoinName}}</div>
  						<el-form  class="list_form"  :model="sellForm">
				            <el-form-item label="卖出价" >
				               <el-input v-model="sellForm.sellprice"  @blur="caculate(2)">
							  </el-input>
				            </el-form-item>
				          	 <el-form-item label="卖出量" class="list_buynum">
				               <el-input v-model="sellForm.sellnum" placeholder="请输入卖出量" @blur="caculate(2)" >
							  </el-input>
				            </el-form-item>
			              	<div class="list_text">
				            	<span>预计交易额</span>
				            	<span>{{totalamountsell}} BTCX</span>
				            </div>
				            <div class="list_slider list_slider_right">
				            	<el-slider v-model="sellForm.slidernum"></el-slider>
				            </div>
				             <div class="list_rate">
				            	<span>费率{{feeSell}}</span>
				            	<span>手续费{{serviceChargeSell}}</span>
				            </div>
				            <!-- <el-form-item> -->
				            	<el-button style="width:100%;" class="span_btn_all " type="success"  @click="handlesell()" >立即卖出</el-button>
				            <!-- </el-form-item> -->

			          	</el-form>
      				</div>
      			</div>
			</div>
		</div>
      </div>
    </div>
    <!-- 交易密码 -->
    <el-dialog title="填写交易密码" top="0"  class="form_part" :visible.sync="paypasswordVisible"  :close-on-click-modal="false">
        <el-form :model="paypasswordForm" class="" label-width="85px" :rules="paypasswordRules" ref="paypasswordForm">
                              
            
            <el-form-item label="交易密码:" prop="payPassword">
              <el-input v-model="paypasswordForm.payPassword" type="password" placeholder="交易密码" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item class="btn_add">
               <el-button style="width:100%" type="primary"  @click.native="sureDel('paypasswordForm')" :loading="payLoading">确认</el-button>
            </el-form-item>
         
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button style="width:100%" type="primary"  @click.native="addSubmit('addForm')" :loading="addLoading">添加</el-button>
         
        </div> -->
    </el-dialog>
  </div>
</template>
<script>
import myHeader from './common/header'
import * as requires from '../lib/require.js'
import * as ordersCommon from '../api/ordersCommon.js'
import * as trademark from '../api/trademark';
import * as coinwallet from '../api/coinwallet';

// import '../lib/jquery'
/*import '../lib/jquery.mousewheel'
import '../lib/sockjs'
import '../lib/stomp'*/
// import '../lib/kline'
	export default {
		components:{
	        myHeader
	    },
	    data(){
	    	return {
	    		marketName:'',//默认交易市场名字
	    		transAreaId:'',//交易区域id
	    		marketListArea:[
	    			{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'-0.17',trendmap:'',data:[0.2,0.4,0.6,0.8]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
					{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
	    		],
	    		tradingarea:[
					{code:"BTCX",name:'first',isOpen:true,isInves:false},
					{code:"HHT",name:'second',isOpen:true,isInves:false},
					{code:"BTC",name:'third',isOpen:true,isInves:false},
					{code:"ETH",name:'fourth',isOpen:true,isInves:false},
					{code:"USDT",name:'five',isOpen:true,isInves:false},
					{code:"CET",name:'six',isOpen:false,isInves:false},
					{code:"考察区" ,tradlabel:'inves',name:'seven',isOpen:true,isInves:true},
				],
	    		payLoading:false,
	    		paypasswordVisible:false,
	    		paypasswordForm:{},
			 	paypasswordRules:{
			         payPassword: [
			            { required: true, message: '请输入交易密码', trigger: 'blur' }
			        ],
			      },
	    		isBtnLoading:false,
	    		buyForm:{buyprice:0,buynum:'0.0000'},
				sellForm:{sellprice:0,sellnum:'0.0000',},
	    		entrustlistData:[],
	    		deallistData:[],
	    		deallist:[],
		    	activeName:'first',
		    	activeNameMarket:'area0',
		      	showCount:3,
			  	total:0,
			  	page:1,
			  	total1:20,
			  	page1:1,
			  	marketId:'',//市场id
			  	marketList:'',
			  	userId:'',
			  	type:1,
			  	limit:15,
			  	entrustList:[],
			  	buyList:[{price:'789.86'},{price:'444.86'},{price:'8676.86454'},{price:'2555.2586'},{price:'4570.8446'}],
				sellList:[{price:'189.996'}],
				feeBuy:'',//买入手续费
				feeSell:'',//卖出手续费
				price:'',
				num:'',
				feeRate:'',
				round:8,
				totalamount:'0.0000',//买入总交易额
				totalamountsell:'0.0000',//卖出总交易额
				serviceCharge:'0.000000',//手续费
				serviceChargeSell:'0.000000',//手续费
				coinId:'',//币id
				coinIdSell:'',//卖出币id
				myBuyCoinName:'',//买入我的余额币名称
				mySellCoinName:'',//卖出我的余额币名称
				balance:'0',//买入余额
				balanceSell:'0',//卖出余额
				isMarketId:false,//是否通过市场id进入
				iconName:'el-icon-caret-bottom',
				dropdownClass:'',
				isTradeId:false,//是否是通过币种id进入
	    	}
	    },
	    methods:{
	    	//点击行触发事件
	    	rowClick(row, event, column){
	    		console.log(row)
        		this.marketName=row.name;
        		this.marketId=row.marketId;
        		this.feeBuy=row.feeBuy;
        		this.feeSell=row.feeSell;
        		this.coinId=row.buyCoinId;//买id
        		this.coinIdSell=row.sellCoinId;//卖id
        		let coinName=row.name.split('_');
        		this.mySellCoinName=coinName[0];
        		this.myBuyCoinName=coinName[1];
    			

        		// this.fetchDataWallet();
        		this.fetchDataEntrustList();//获取最近的委托买单
				this.fetchDataDealList();//获取最近的成交记录
				if(this.userId){
					this.fetchDataWallet(this.coinId,1);
    				this.fetchDataWallet(this.coinIdSell,2);
					this.fetchData();
					this.fetchDataDeal();
				}
				

	    	},
	    	changeIcon(val){
	    		// console.log(val)
	    		// if(val){
	    			this.iconName="el-icon-caret-top";
	    			this.dropdownClass=" el-dropdown-border";
	    		// }else{
	    			// this.iconName="el-icon-caret-bottom"

	    		// }
	    	},
	    	changeIconOut(val){
    			this.iconName="el-icon-caret-bottom";
    			this.dropdownClass="";

	    	},
    		handleClick(tab, event) {
		        console.log(tab);
		       
	        },
	    	//市场下拉选择
	    	handleCommand(command) {
		        this.$message('click on item ' + command);
	      	},
	    	 //类型转换
		    formatSex: function (row, column) {
		      return row.type == 1 ? '买' :row.type==2?'卖':'未知';
		    },
		     //状态转换
		    formatStatus: function (row, column) {
		      return row.status == 0 ? '未成交' :row.status==1?'已成交':row.status==2?'已撤单':row.status==4?'异常单':'未知';
		    },
	    	handlebuy(){
	    		//交易-创建委托单-买
    			//立即买入
    			if(!this.userId){
    				// this.$router.push("/login")
    				this.$message.error("未登录")
    			}else{
    				this.type=1;
					if(!this.buyForm.buynum || this.buyForm.buynum<=0 || this.buyForm.buyprice<=0){
						this.$message.error("请填写有效的价格和数量");
						return;
					}
					/*if((this.buyForm.buynum*this.buyForm.buyprice)<100 || (this.buyForm.buynum*this.buyForm.buyprice)>500000){
						this.$message.error("委托数量错误，委托数量范围[100.00000000,500000.00000000]，当前委托量: "+this.buyForm.buynum*this.buyForm.buyprice);
						return;
					}*/
					
					this.paypasswordVisible=true;
    			}
    			
			
	    	},
    	    sureDel(){
		      	this.$refs.paypasswordForm.validate((valid) => {
			        if (valid) {
			        	let para='';
			     		this.payLoading=true;
			     		if(this.type==1){
			     			para={
								userId:this.userId,
								marketId:this.marketId,
								price:this.buyForm.buyprice,
								num:this.buyForm.buynum,
								type:this.type,
								payPassword:this.paypasswordForm.payPassword
							}
			     		}else{
			     			para={
								userId:this.userId,
								marketId:this.marketId,
								price:this.sellForm.sellprice,
								num:this.sellForm.sellnum,
								type:this.type,
								payPassword:this.paypasswordForm.payPassword
							}
			     		}
						
						console.log(para);
						ordersCommon.add.r(para).then((res)=>{
							console.log(res);
							if(res.data.retCode==1){
								this.$message("交易成功")
								this.paypasswordVisible=false;
								// this.remitData=res.data.data;
								// this.tradeNo=res.data.data.tradeNo;
								// this.remitData.statusName=this.formatStatus(this.remitData);
					  			
					  		}else{
					  			this.$message.error(res.data.retMsg);
					  		}
					  		this.payLoading=false;
						})
			        }else{
			          console.log('error submit!!');
			          return false;
			        }

		      	})		        
		    },

			handlesell(){
				//交易-创建委托单-卖
    			//立即买入
    			if(!this.userId){
    				// this.$router.push("/login")
    				this.$message.error("未登录")
    			}
    			this.type=2;
				if(!this.sellForm.sellnum || this.sellForm.sellnum<=0 || this.sellForm.sellprice<=0){
					this.$message.error("请填写有效的价格和数量");
					return;
				}
				/*if((this.sellForm.sellnum*this.sellForm.sellprice)<100 || (this.sellForm.sellnum*this.sellForm.sellprice)>500000){
					this.$message.error("委托数量错误，委托数量范围[100.00000000,500000.00000000]，当前委托量: "+this.sellForm.sellnum*this.sellForm.sellprice);
					return;
				}*/
				
				this.paypasswordVisible=true;
			},
    		handleCurrentChange(val) {
		      	this.page = val;
		      	// this.fetchData();
		    },
		    handleCurrentChange1(val) {
		      	this.page1 = val;
		      	// this.fetchData1();
		    },

	        fetchDataMarket(init) {
    			//市场列表
    			let para={};
    			if(init){
    				para={
    					transAreaId:this.transAreaId,
    				}
    			}
    			console.log(para)
		      	trademark.request.r(para).then((res) => {
			      	console.log(res);
			      	if(res.data.retCode==1){
			        	this.marketListArea=res.data.data.list;
			        	if(res.data.data.list){
			        		if(!this.isTradeId){
			        			this.marketList = res.data.data.list;

			        			this.marketName=this.marketList[1].name;
				        		this.marketId=this.marketList[1].marketId;
				        		this.feeBuy=this.marketList[1].feeBuy;
				        		this.feeSell=this.marketList[1].feeSell;
				        		this.coinId=this.marketList[1].buyCoinId;//买id
				        		this.coinIdSell=this.marketList[1].sellCoinId;//卖id
				        		let coinName=this.marketList[1].name.split('_');
				        		this.mySellCoinName=coinName[0];
				        		this.myBuyCoinName=coinName[1];
			        			

				        		// this.fetchDataWallet();
				        		this.fetchDataEntrustList();//获取最近的委托买单
		    					this.fetchDataDealList();//获取最近的成交记录
		    					if(this.userId){
		    						this.fetchDataWallet(this.coinId,1);
			        				this.fetchDataWallet(this.coinIdSell,2);
		    						this.fetchData();
		    						this.fetchDataDeal();
		    					}
			        		}
			        		
	    					

			        	}
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
            fetchDataMarketCoin() {
			//市场列表--通过币种获取可用的交易市场列表
				let	para={
					coinId:this.coinId,
				}
    			console.log(para)
		      	trademark.requestMarket.r(para).then((res) => {
		      		console.log("通过币种后去可用的交易市场列表")
			      	console.log(res);
			      	if(res.data.retCode==1){
			        	this.marketList = res.data.data;
			        	// this.marketListArea=res.data.data;
			        	if(res.data.data){
			        		this.marketName=this.marketList[0].name;
			        		this.marketId=this.marketList[0].marketId;
			        		this.feeBuy=this.marketList[0].feeBuy;
			        		this.feeSell=this.marketList[0].feeSell;
			        		this.coinId=this.marketList[0].buyCoinId;//买id
			        		this.coinIdSell=this.marketList[0].sellCoinId;//卖id
			        		let coinName=this.marketList[0].name.split('_');
			        		this.mySellCoinName=coinName[0];
			        		this.myBuyCoinName=coinName[1];
		        			

			        		// this.fetchDataWallet();
			        		this.fetchDataEntrustList();//获取最近的委托买单
	    					this.fetchDataDealList();//获取最近的成交记录
	    					if(this.userId){
	    						this.fetchDataWallet(this.coinId,1);
		        				this.fetchDataWallet(this.coinIdSell,2);
	    						this.fetchData();
	    						this.fetchDataDeal();
	    					}
	    					

			        	}
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    fetchDataMarketInfo() {
    			//平台钱包账号详情
    			let para={
    				userId:this.userId,
    				coinId:this.coinId,
    			}
		      	trademark.info.r(para).then((res) => {
			      	console.log(res);
			      	if(res.data.retCode==1){
			        	this.marketInfo = res.data.data.list;
			        	if(res.data.data.list){
			        		this.marketId=this.marketInfo.marketId;
			        		this.feeBuy=this.marketInfo.feeBuy;
			        		this.feeSell=this.marketInfo.feeSell;
			        		this.coinId=this.marketInfo.buyCoinId;//买id
			        		this.coinIdSell=this.marketInfo.sellCoinId;//卖id
			        		let coinName=this.marketInfo.name.split('_');
			        		this.mySellCoinName=coinName[0];
			        		this.myBuyCoinName=coinName[1];
		        		
			        		// this.fetchDataWallet();
			        		this.fetchDataEntrustList();
	    					this.fetchDataDealList();
	    					if(this.userId){
    							this.fetchDataWallet(this.coinId,1);
		        				this.fetchDataWallet(this.coinIdSell,2);

	    						this.fetchData();
	    						this.fetchDataDeal();
	    					}
	    					

			        	}
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    caculate(index){
		    	//计算总额
		    	console.log(index);
		    	let para="";
		    	if(index==1){
		    		if(!this.buyForm.buyprice || !this.buyForm.buynum){
		    			return;
		    		}
		    		para={
	    				price:this.buyForm.buyprice,
	    				num:this.buyForm.buynum,
	    				feeRate:this.feeBuy,
	    				round:this.round,
	    			}
		    	}else{
		    		if(!this.sellForm.sellprice || !this.sellForm.sellnum){
		    			return;
		    		}
		    		para={
	    				price:this.sellForm.sellprice,
	    				num:this.sellForm.sellnum,
	    				feeRate:this.feeSell,
	    				round:this.round,
	    			}
		    	}
		    
    			console.log(para)
		      	ordersCommon.caculate.r(para).then((res) => {
			      	console.log(res);
			      	if(res.data.retCode==1){
			      		if(index==1){
			        		this.totalamount=res.data.data;
			        		this.serviceCharge=(this.totalamount-this.buyForm.buyprice*this.buyForm.buynum).toFixed(8);

			      		}else{
			      			this.totalamountsell=res.data.data;
			        		this.serviceChargeSell=(this.totalamountsell-this.sellForm.sellprice*this.sellForm.sellnum).toFixed(8);

			      		}
			        
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    fetchDataWallet(id,index){
		    	//获取平台钱包信息
		    	let para={
    				userId:this.userId,
    				coinId:id,
    			}
    			console.log(para);
    			coinwallet.requestListCoinWallet.r(para).then((res) => {
			      	console.log(res);
			      	if(res.data.retCode==1){
			       		if(index==1){
			       			//买入
			       			if(res.data.data){
			       				this.balance=res.data.data.balance;

			       			}
			       		}else{
			       			//卖出
			       			if(res.data.data){
			       				this.balanceSell=res.data.data.balance;

			       			}

			       		}
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    fetchData() {
    			//获取委托单列表
    			let para={
    				showCount:this.showCount,
		          	currentPage:this.page,//当前查询页
		          	marketId:this.marketId,
		          	userId:this.userId,
    			}
    			console.log(para)
		      	ordersCommon.request.r(para).then((res) => {
		      		console.log("获取委托单列表")
			      	console.log(res);
			      	if(res.data.retCode==1){
			      		this.total=parseInt(res.data.data.totalRow);
			        	this.entrustlistData=res.data.data.list;
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    fetchDataDeal() {
    			//获取成交记录单列表
    			let para={
    				showCount:this.showCount,
		          	currentPage:this.page1,//当前查询页
		          	marketId:this.marketId,
		          	userId:this.userId,
    			}
    			console.log(para)
		      	ordersCommon.requestDeal.r(para).then((res) => {
			      	console.log(res);
			      	if(res.data.retCode==1){
			      		this.total1=parseInt(res.data.data.totalRow);
			        	this.deallistData=res.data.data.list;
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    handleDeal(index,row){
		    //取消委托订单
		     	let para = {          
		          orderId:row.orderId,
		          userId:this.userId,        
		        };
		      	console.log(para)
		      	ordersCommon.cancel.r(para).then((res) => {
		        console.log(res)
		        if(res.data.retCode==1){        
		            this.$message("取消委托订单成功")
		            this.fetchData();
		        
		        }else{
		           this.$message({
		              message: res.retMsg,
		              type: 'error'
		            });
		        }
		      
		      
		        this.loading = false;
		      });
			},
	     	fetchDataEntrustList() {
    			//获取最近委托单买单
    			let para={
    				marketId:this.marketId,
    				limit:this.limit,
    			}
    			console.log(para)
		      	ordersCommon.requestRecentEntrust.r(para).then((res) => {
		      		console.log("获取最近委托单买单")
			      	console.log(res);
			      	// this.buyList.zeroNum='0';
			      	if(res.data.retCode==1){
			      		this.buyList.map(x=>{
			      			x.zeroNum="";
			      			console.log(8-x.price.split('.')[1].length)
			      			for(var i=0;i<8-x.price.split('.')[1].length;i++){
			      				x.zeroNum+='0';
			      			}
			      			
			      		})
			      		console.log(this.buyList)
			      		if(res.data.data.buyList){
			        	this.buyList=res.data.data.buyList;

			      		}
			      		if(res.dta.data.sellList){
			        	this.sellList=res.data.data.sellList;

			      		}
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
		    fetchDataDealList() {
    			//获取最近成交记录
    			let para={
    				marketId:this.marketId,
    				limit:this.limit,
    			}
    			console.log(para)
		      	ordersCommon.requestRecentDeal.r(para).then((res) => {
			      	console.log(res);
			      	if(res.data.retCode==1){
			      		if(res.data.data){
			        		this.entrustList = res.data.data.list;

			      		}
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
	        fetchDataArea() {
    			//获取交易区域
    			let para={
    				configCode:'transArea',
    			}
		      	ordersCommon.areaList.r(para).then((res) => {
		      		console.log("获取交易区域列表")
			      	console.log(res);
			      	if(res.data.retCode==1){
			      		if(res.data.data.list.length>0){
			      			this.tradingarea=res.data.data.list;
			        		this.transAreaId=res.data.data.list[0].idNo;
			      		}
			      		// if(!this.isTradeId){
			        		this.fetchDataMarket(true);

			      		// }
			        	
			      	}else{
			      		this.$message.error(res.data.retMsg);
			      	}       
			     

		      	});
		    },
	    	klineConfig(){
			  	this.$nextTick(() => {			
	    		  requires.requirek.config({				    
				         paths: {
				            "jquery": "../lib/jquery",
				            "jquery.mousewheel": "../lib/jquery.mousewheel",
				            "sockjs": "../lib/sockjs",
				            "stomp": "../lib/stomp",
				            "kline": "../lib/kline"
				        },
				        shim: {
				            "jquery.mousewheel": {
				                deps: ["jquery"]
				            },
				            "kline": {
				                deps: ["jquery.mousewheel", "sockjs", "stomp"]
				            }
				        }
				    });
				    let para1=['kline'];
	    		  	// console.log(requires.requirek(para1));
				    requires.requirek(['kline'], function () {
				        var kline = new Kline({
				            element: "#kline_container",
				            /*
				             width: 1200,
				            height: 650,*/
				            theme: 'dark', // light/dark
				            language: 'zh-cn', // zh-cn/en-us/zh-tw
				            ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
				            symbol: "BTC",
				            symbolName: "BTC/USD",
				            type: "poll", // poll/socket
				            url: "/examples/mock.json",
				            // url: "http://localhost:8081/examples/mock.json",
				            limit: 1000,
				            intervalTime: 5000,
				            debug: true,
				            showTrade: true
				        });

				        kline.draw();
				    });
			    });
	    	}
	    },
	    created(){
	    	this.userId=sessionStorage.getItem('userId');
		    this.fetchDataArea();

    	 	if(this.$route.query.id!=undefined&&this.$route.query.id!="undefined"&&this.$route.query.id!=""){
		      this.coinId=this.$route.query.id;
		      this.isMarketId=true;
		      this.isTradeId=true;
		      // this.fetchDataWallet(this.coinId,2);
	    		this.fetchDataMarketCoin();

		    }
	    	
		  	// this.$nextTick(() => {			
		  		
		    // });
	    	// console.log(requires.requirek);
	    	// this.klineConfig();
	    }
	}
</script>